<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="4" :xs="24" :sm="8" :lg="3">
        <div style="text-align: center">
          <div>
            <el-tag style="width: 120px;font-size: 20px;color: #fff;" :color="color[type]">No.{{ index }}</el-tag>
          </div>
          <div style="border: #d7dae2 1px solid;margin-top: 5px;text-align: center;width: 100px;margin-left: auto;margin-right: auto;">
            <div
              :style="{
                color: color[type],
                fontSize: '20px',
                marginLeft: 'auto',
                marginRight: 'auto'
              }"
            >
              <div>{{ (data.probability*100).toFixed(0) }}%</div>
              <div v-if="type===1">有希望</div>
              <div v-if="type===2">希望很大</div>
              <div v-if="type===3">靠谱</div>
              <div v-if="type===4">非常靠谱</div>
            </div>
          </div>
        </div>
      </el-col>
      <!--      <el-col :span="4" :xs="24" :sm="8" :lg="3">-->
      <!--        <el-image style="width: 100px;height: 100px;" />-->
      <!--      </el-col>-->
      <el-col :span="14">
        <div>
          <h3>{{ data.acadName }}
          </h3>
        </div>
        <el-row :gutter="20">
          <el-col :span="6">{{ data.acadNumber?data.acadNumber:'-' }}</el-col>
          <el-col v-if="st===1" :span="6">综合评分 {{ data.totalPoint }}</el-col>
          <el-col v-if="st===2" :span="6">院校评分 {{ data.acadFirstTotalPoint }}</el-col>
          <el-col v-if="st===3" :span="6">专业评分 {{ data.majorFirstTotalPoint }}</el-col>
          <el-col :span="6">2019年招生计划 {{ data.enrollmentPlan?data.enrollmentPlan:'-' }}</el-col>
        </el-row>
      </el-col>
      <el-col :span="5">
        <el-button type="primary" @click="handleViewMajor(data.majors, data)">查看专业</el-button>
      </el-col>
    </el-row>
    <div style="height: 15px;" />
    <el-row :gutter="20">
      <el-col :span="10" :xs="24" :sm="10" :lg="10">
        <div style="width: 100%;">
          <RadarChart cid="1" :title="chartTitle" :data="[data.academyStrength,data.areaAnalysisPoint,data.areaMatchPoint,data.majorMatchPoint,data.scoreMatchPoint,data.stabilityPoint]" />
        </div>
      </el-col>
      <el-col :span="14" :xs="24" :sm="14" :lg="14">
        <ResultTable :data="academyScores" />
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'ResultItem',
  components: {
    ResultTable: () => import('./ResultTable'),
    RadarChart: () => import('./Radar')
  },
  props: {
    data: {
      type: [Object],
      required: true
    },
    scores: {
      type: [Array],
      required: true
    },
    index: {
      type: [Number],
      required: true
    },
    st: {
      type: [String, Number],
      required: true
    },
    type: {
      type: [Number],
      required: true
    }
  },
  data() {
    return {
      color: {
        1: '#F17467',
        2: '#FCC83C',
        3: '#89CC4E',
        4: '#597FF5'
      }
    }
  },
  computed: {
    chartTitle() {
      return [
        { name: '院校实力', max: 5 },
        { name: '区域认可', max: 5 },
        { name: '地域要求', max: 5 },
        { name: '专业吻合', max: 5 },
        { name: '分数吻合', max: 5 },
        { name: '录取稳定', max: 5 }
      ]
    },
    academyScores() {
      return this.scores.filter((v) => {
        return v.academy_code === this.data.acadCode
      })
    }
  },
  methods: {
    handleViewMajor(value, academy) {
      this.$emit('view-major', {
        majors: value,
        academy: academy
      })
    }
  }
}
</script>

<style scoped>

</style>

